<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑龙江旅游 - 探索北国风光</title>
    <!-- 引入外部CSS样式文件 -->
    <link rel="stylesheet" href="D:\web1\travel\css\base.css"type="text/css" media="all">
    <!-- 引入Font Awesome图标库 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <div class="main">
        <!-- 1. 顶部搜索栏和登录/注册/关于我们栏 -->
<div class="top-bar">
    
    <div class="search-box">
        <form action="search.html" method="get">
            <input type="text" name="keyword" placeholder="搜索景点、攻略...">
            <button type="submit"><i class="fa fa-search"></i></button>
        </form>
    </div>
    
            
            <!-- 右侧导航链接 -->
            <ul class="top-nav">
                <li><a href="login.html"><i class="fa fa-user-circle"></i> 登录</a></li>
                <li><a href="register.html"><i class="fa fa-user-plus"></i> 注册</a></li>
                <li><a href="about.html"><i class="fa fa-info-circle"></i> 关于我们</a></li>
            </ul>
        </div>

        <!-- 2. 轮播图区域 -->
        <div class="banner">
            <div class="carousel">
                <!-- 轮播图片容器 -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="D:\img\img1.jpg" alt="哈尔滨冰雪大世界">
                    </div>
                    <div class="carousel-item">
                        <img src="D:\img\img2.jpg" alt="五大连池风景区">
                    </div>
                    <div class="carousel-item">
                        <img src="D:\img\img3.jpg" alt="镜泊湖">
                    </div>
                    <div class="carousel-item">
                        <img src="D:\img\img4.jpg" alt="太阳岛">
                    </div>
                    <div class="carousel-item">
                        <img src="D:\img\img5.jpg" alt="伊春金山鹿苑">
                    </div>
                    <div class="carousel-item">
                        <img src="D:\img\img6.jpg" alt=漠河北极村">
                    </div>
                </div>
                <!-- 轮播控制按钮 -->
                <button class="carousel-control prev"><i class="fa fa-chevron-left"></i></button>
                <button class="carousel-control next"><i class="fa fa-chevron-right"></i></button>
                <!-- 轮播指示器 -->
                <div class="carousel-indicators">
                    <span class="indicator active" data-index="0"></span>
                    <span class="indicator" data-index="1"></span>
                    <span class="indicator" data-index="2"></span>
                    <span class="indicator" data-index="3"></span>
                    <span class="indicator" data-index="4"></span>
                    <span class="indicator" data-index="5"></span>
                </div>
            </div>
        </div>

        <!-- 3. 主导航菜单 -->
        <div class="main-menu">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="history.html">历史沿革</a></li>
                <li><a href="geography.html">地理位置</a></li>
                <li><a href="culture.html">风俗文化</a></li>
                <li><a href="attractions.html">景点选择</a></li>
                <li><a href="products.html">名优特产</a></li>
                <li><a href="message.html">在线留言</a></li>
            </ul>
        </div>

        <!-- 4. 内容区域 -->
        <div class="content">
            <!-- 黑龙江简介 -->
            <div class="bar">
                <h3>黑龙江省简介</h3>
            </div>
            <div class="pad">
                <p>黑龙江省，简称"黑"，省会哈尔滨，位于中国最东北部，中国国土的北端与东端均位于省境。因省境东北有黑龙江而得名，是中国纬度最高的省份。</p>
                <p>黑龙江省旅游资源丰富，兼具冰雪、生态、民俗、边境等多元特色，拥有哈尔滨冰雪大世界、五大连池、镜泊湖、太阳岛、亚布力滑雪场等著名旅游景点，是中国冰雪旅游和生态旅游的重要目的地。</p>
            </div>

            <!-- 热门景点 -->
            <div class="bar">
                <h3>热门景点推荐</h3>
            </div>
            <div class="list">
                <ul>
                    <li>
                        <a >
                            <img src="D:\img\img7.jpg"alt="镜泊湖">
                            <h3>镜泊湖</h3>
                        </a>
                    </li>
                    <li>
                        <a >
                            <img src="D:\img\img8.jpg" alt="索菲亚教堂">
                            <h3>索菲亚教堂</h3>
                        </a>
                    </li>
                    <li>
                        <a >
                            <img src="D:\img\img9.jpg"  alt="五大连池">
                            <h3>五大连池</h3>
                        </a>
                    </li>
                    <li>
                        <a >
                            <img src="D:\img\img10.jpg" alt="中央大街">
                            <h3>中央大街</h3>
                        </a>
                    </li>
                </ul>
            </div>

            <!-- 旅游宣传视频 -->
            <div class="bar">
                <h3>黑龙江旅游宣传片</h3>
            </div>
            <div class="video-container pad">
                <video controls poster="D:\img\img11.jpg"  width="100%" height="auto">
                    <source src="D:\img\video.mp4" type="video/mp4">
                    您的浏览器不支持HTML5视频播放，请更新浏览器版本。
                </video>
            </div>
        </div>

        <!-- 5. 页脚 -->
        <div class="end">
            <p>©  黑龙江旅游网 版权所有 | 联系电话：0451-12345678 | 地址：哈尔滨市南岗区中山路</p>
        </div>
    </div>

    <!-- 轮播图JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const carouselItems = document.querySelectorAll('.carousel-item');
            const indicators = document.querySelectorAll('.indicator');
            const prevBtn = document.querySelector('.carousel-control.prev');
            const nextBtn = document.querySelector('.carousel-control.next');
            let currentIndex = 0;
            let carouselInterval;

            // 初始化轮播
            function initCarousel() {
                showItem(0);
                startAutoPlay();
            }

            // 显示指定索引的轮播项
            function showItem(index) {
                // 隐藏所有项，重置指示器
                carouselItems.forEach(item => item.classList.remove('active'));
                indicators.forEach(ind => ind.classList.remove('active'));
                
                // 显示当前项，激活指示器
                carouselItems[index].classList.add('active');
                indicators[index].classList.add('active');
                currentIndex = index;
            }

            // 下一项
            function nextItem() {
                const nextIndex = (currentIndex + 1) % carouselItems.length;
                showItem(nextIndex);
            }

            // 上一项
            function prevItem() {
                const prevIndex = (currentIndex - 1 + carouselItems.length) % carouselItems.length;
                showItem(prevIndex);
            }

            // 自动播放
            function startAutoPlay() {
                carouselInterval = setInterval(nextItem, 5000); // 5秒切换一次
            }

            // 事件监听
            prevBtn.addEventListener('click', function() {
                clearInterval(carouselInterval);
                prevItem();
                startAutoPlay();
            });

            nextBtn.addEventListener('click', function() {
                clearInterval(carouselInterval);
                nextItem();
                startAutoPlay();
            });

            // 指示器点击
            indicators.forEach(ind => {
                ind.addEventListener('click', function() {
                    clearInterval(carouselInterval);
                    const index = parseInt(this.getAttribute('data-index'));
                    showItem(index);
                    startAutoPlay();
                });
            });

            // 启动轮播
            initCarousel();
        });
    </script>
</body>
</html>
